<template>
  <div class="photoinfo-container">
    <h3>{{info.title}}</h3>
    <p class="subtitle">
      <span>发表时间：{{info.add_time|dateFormat}}</span>
      <span>点击：{{info.click}} 次</span>
    </p>

    <hr>

    <!-- 缩略图区域 -->
    <div class="thumbs">
      <!-- <img
        class="preview-img"
        src=""
        height="100"
      > -->
      <vue-preview :slides="lists"></vue-preview>
    </div>

    <!-- 图片内容区域 -->
    <div class="content" v-html="info.content"></div>

    <!-- 放置一个现成的 评论子组件 -->
    <cmt-box :id="imgId"></cmt-box>

  </div>
</template>
<script>
import Comment from '../subcomponents/Comment.vue'
export default {
  data() {
    return {
        imgId:this.$route.params.imgId,
        info:{},
        lists:[]
    };
  },
  components:{
      CmtBox:Comment
  },
  created() {
    console.log(this.$route.params.imgId,1111);
    this.getInfo();
    this.getThumbs();
  },
  methods:{
      getInfo(){
          this.$http.get(`api/getimageInfo/${this.imgId}`).then((res)=>{
              console.log(res);
              if(res.body.status==0){
                  this.info=res.body.message[0];
              }
          });
      },
      getThumbs(){
          this.$http.get(`api/getthumimages/${this.imgId}`).then((res)=>{
              if(res.body.status==0){
                  this.lists=res.body.message;
                  
                  this.lists.forEach(item=>{
                      item.w=600;
                      item.h=400;
                      item.msrc=item.src;
                      item.title="图片标题";
                  })
                  console.log(this.lists);
              }
          });
      }
  }
};
</script>

<style  lang="scss">
/* 如果要修改插件的样式, 必须去掉scoped属性 */
.photoinfo-container {
  padding: 3px;
  h3 {
    color: #26a2ff;
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }

  .content {
    font-size: 13px;
    line-height: 30px;
  }

  .thumbs {
    .my-gallery{
        display:flex;
        flex-wrap: wrap;
         figure {
             margin: 5px 10px;
            img{
                width: 80px;
                height:80px;
                box-shadow: 0 0 8px #999;
            }
        }
    }  
   
  }
}
</style>